<template>
  <el-text class="header">阿林饥荒工具</el-text>
  <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="动画解包" name="1">
      <Unzip></Unzip>
    </el-tab-pane>
    <el-tab-pane label="wegame mod查询" name="2">
      <SearchMod></SearchMod>
    </el-tab-pane>
    <el-tab-pane label="专服自动更新mod" name="third">
      <ServerUpdate></ServerUpdate>
    </el-tab-pane>
  </el-tabs>


</template>

<script lang="ts" setup>

import { reactive, ref } from 'vue'
import Unzip from './components/Unzip.vue'
import SearchMod from './components/SearchMod.vue'
import ServerUpdate from './components/ServerUpdate.vue'
import { TabsPaneContext , ElMessageBox } from 'element-plus'

const activeName = ref('1')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

</script>


<style>
  .header{
    display: block;
    font-size: 30px;
    margin:50px auto;
    text-align: center;
  }
  .title{
    text-align: center;
    margin: 20px auto;
  }
</style>